<template>
  <CommonCard title="累计用户数" :count="usersTotal">
    <template #main>
      <v-chart :option="setOption()"></v-chart>
    </template>
    <!-- 下半部分 -->
    <template #buttom>
      <div class="buttom">
        <div class="content">
          <span class="mr-5">日同比</span>
          <span class="mr-5">{{ userGrowthLastDay }}</span>
          <span
            :class="{
              up: Number(userGrowthLastDay) > 0,
              down: Number(userGrowthLastDay) < 0
            }"
          ></span>
        </div>
        <div class="content">
          <span class="mr-5">月同比</span>
          <span class="mr-5">{{ userGrowthLastMonth }}</span>
          <span
            :class="{
              up: Number(userGrowthLastMonth) > 0,
              down: Number(userGrowthLastMonth) < 0
            }"
          ></span>
        </div>
      </div>
    </template>
  </CommonCard>
</template>

<script setup lang="ts">
// import useEchartStore from '../../../../../../stores/echart'
import { computed } from 'vue'
import useEchartStore from '@/stores/echart'

const echartStore = useEchartStore()

const usersTotal = computed(() => {
  return echartStore.storeEchartData.usersTotal
})
const usersLastDay = computed(() => {
  return echartStore.storeEchartData.usersLastDay
})
const usersLastMonth = computed(() => {
  return echartStore.storeEchartData.usersLastMonth
})
const userGrowthLastDay = computed(() => {
  return echartStore.storeEchartData.userGrowthLastDay
})
const userGrowthLastMonth = computed(() => {
  return echartStore.storeEchartData.userGrowthLastMonth
})

// 声明图表需要的配置项

const setOption = () => ({
  xAxis: {
    type: 'value', // 将x轴的类型转换成 数值轴
    show: false,
    max: usersTotal.value //最大值
  },
  tooltip: {
    trigger: 'axis'
  },
  yAxis: {
    type: 'category', // 将y轴的类型转换成 类目轴
    show: false
  },
  grid: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
  },
  series: [
    {
      name: '用户增长量',
      type: 'bar',
      data: [usersTotal.value - usersLastMonth.value],
      barWidth: '30%',
      itemStyle: {
        color: 'red'
      },
      showBackground: true, // 展示背景颜色
      label: {
        show: true, // 展示
        distance: 50, // 距离
        position: 'right',
        color: 'red', // 自定义的颜色
        formatter() {
          return '|'
        }
      }
    }
  ]
})
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #888;
}
.buttom {
  display: flex;
  justify-content: space-between;
}
</style>
